<template>
  <div class="page-container">
    <el-container>
      <el-aside class="page-aside" width="280px" v-drag v-collapse>
        <div class="title">
          <div class="title-content">目录</div>
          <div class="title-button">
            <div class="button-list">
              <div class="button-item">
                <ac-icon
                  iconId="018dca412c4e207388f7"
                  :style="'cursor: pointer;color: ' + (treeCheck ? 'rgb(0,133,246)' : '#999') + ';font-size: 18px;'"
                  :title="treeCheck ? '导入模式' : '导出模式'"
                  @click.stop="changeMode"
                />
              </div>
              <div class="button-item">
                <ac-icon
                  iconId="018ece4f749ec5911772"
                  style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
                  title="导出脚本"
                  @click.stop="handleExport"
                />
              </div>
              <div class="button-item">
                <el-upload
                  action=""
                  :http-request="handleImport"
                  :show-file-list="false"
                  accept=".dat"
                >
                  <ac-icon
                    iconId="018ece4f70fcf0627f81"
                    style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
                    title="导入脚本"
                  />
                </el-upload>
              </div>
            </div>
            <el-dropdown trigger="hover">
              <span class="title-button-box">
                <ac-icon iconId="018dc9c3efed46e8b927" size="18" @click.stop />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.stop="addScriptGroovy({})">
                    <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" /> 新增脚本
                  </el-dropdown-item>
                  <el-dropdown-item @click.stop="addFolder({})" :divided="true">
                    <ac-icon iconId="018dc9c3efed6d208a59" color="orange" style="margin-right: 5px" /> 新增目录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="filter-box">
          <el-input placeholder="搜索" v-model="filterText" clearable />
        </div>
        <div class="page-aside-grow">
          <el-tree
            ref="tree"
            class="tree"
            node-key="id"
            v-loading="treeLoading"
            element-loading-text="数据加载中..."
            :data="treeData"
            :props="treeProps"
            :highlight-current="true"
            :default-expanded-keys="treeExpand"
            :expand-on-click-node="!treeCheck"
            :filter-node-method="filterNode"
            :show-checkbox="treeCheck"
            @node-click="nodeClick"
          >
            <template v-slot="{ node, data }">
              <div class="node-item">
                <span v-if="data.type === 'folder'" class="icon">
                  <ac-icon v-if="node.expanded" color="orange" iconId="018dc9c3efedbb59d0b3" />
                  <ac-icon v-else color="orange" iconId="018dc9c3efed6d208a59" />
                </span>
                <span v-else-if="data.type === 'script'" class="icon">
                  <ac-icon color="#117fe8" iconId="018dc9c3efb74ac607cb" />
                </span>
                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
                <div class="node-button">
                  <el-dropdown trigger="hover" placement="bottom-start">
                    <span class="node-button-item">
                      <ac-icon iconId="018dca6283a1e534a046" @click.stop />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu v-if="data.type === 'folder'">
                        <el-dropdown-item @click="addScriptGroovy(data.data)">
                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />新增脚本
                        </el-dropdown-item>
                        <el-dropdown-item @click="addFolder(data.data)">
                          <ac-icon iconId="018dc9c3efed6d208a59" color="orange" style="margin-right: 5px" />新增目录
                        </el-dropdown-item>
                        <el-dropdown-item @click="updateNode(data.data)">
                          <ac-icon iconId="018dca6db20c6a3aaf68" color="#0085f6" style="margin-right: 5px" />修改目录
                        </el-dropdown-item>
                        <el-dropdown-item @click="moveNode(data.data)">
                          <ac-icon iconId="018dca444e0754edef13" color="#FF6600" style="margin-right: 5px" />移动目录
                        </el-dropdown-item>
                        <el-dropdown-item @click="deleteNode(data.data)">
                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除目录
                        </el-dropdown-item>
                      </el-dropdown-menu>
                      <el-dropdown-menu v-else-if="data.type === 'script'">
                        <el-dropdown-item @click="editScriptGroovy(data.data)">
                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />修改脚本
                        </el-dropdown-item>
                        <el-dropdown-item @click="deleteScriptGroovy(data.data)">
                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除脚本
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-tree>
        </div>
      </el-aside>
      <el-main class="page-main">
        <div class="box">
          <div class="left">
            <div class="mirror">
              <CodeMirrorEditor
                ref="codeMirror"
                v-model:value="currNode.script"
                :options="codeOptions"
                @cursorActivity="showHint"
                @change="changeScript"
                border
              />
            </div>
          </div>
          <div class="right">
            <el-tabs v-model="tabName" class="fit-tab fit-box">
              <el-tab-pane name="tool" label="工具" class="fit-box">
                <div class="tool">
                  <el-collapse v-model="collapseName" accordion style="width: 280px">
                    <el-collapse-item
                      v-for="(item, index) in toolData"
                      :key="index"
                      :name="'tool_' + index"
                      :title="item.text"
                    >
                      <div class="function-list">
                        <div
                          class="function-item"
                          v-for="(fun, index2) in item.children"
                          :key="index2"
                        >
                          <el-tooltip
                            v-if="fun.data.description"
                            placement="left"
                            effect="light"
                            popper-class="padding-10-15"
                          >
                            <template #content>
                              <div class="content-box">
                                <div
                                  class="content"
                                  v-html="(fun.data.description || '')
                                      .replace(/</ig, '&' + 'lt;')
                                      .replace(/>/ig, '&' + 'gt;')
                                      .replace(/\n/ig, '<br/>')
                                      .replace(/ {4}/g, '&nbsp;&nbsp;&nbsp;&nbsp;')"
                                ></div>
                              </div>
                            </template>
                            <div class="tooltip" @click="addCode(fun.data.code)">{{fun.data.name}}</div>
                          </el-tooltip>
                          <div v-else class="tooltip" @click="addCode(fun.data.code)">{{fun.data.name}}</div>
                          <el-tooltip
                            v-if="fun.data.example"
                            effect="light"
                            popper-class="padding-10-15"
                          >
                            <template #content>
                              <div class="content-box">
                                <div
                                  class="content"
                                  v-html="(fun.data.example || '')
                                      .replace(/</ig, '&' + 'lt;')
                                      .replace(/>/ig, '&' + 'gt;')
                                      .replace(/\n/g, '<br/>')
                                      .replace(/ {4}/g, '&nbsp;&nbsp;&nbsp;&nbsp;')"
                                ></div>
                              </div>
                            </template>
                            <div class="example" @click="addCode(fun.data.example)">示例</div>
                          </el-tooltip>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-tab-pane>
              <el-tab-pane name="logger" label="日志" class="fit-box">
                <el-input type="textarea" readonly v-model="debugLogger"></el-input>
              </el-tab-pane>
              <el-tab-pane name="result" label="结果" class="fit-box">
                <el-input type="textarea" readonly v-model="debugResult"></el-input>
              </el-tab-pane>
            </el-tabs>
            <div class="button">
              <el-button
                type="info"
                @click="clean"
              >清空日志</el-button>
              <el-button
                type="success"
                @click="debug"
              >调试</el-button>
              <el-button
                v-if="currNode.id"
                type="primary"
                @click="saveCode"
              >保存</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>

  <!--新增/编辑目录界面-->
  <el-dialog
    v-model="folderVisible"
    :title="folderTitle"
    width="500px"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-form
      ref="folderForm"
      label-width="120px"
      label-position="right"
      :model="folderData"
      :rules="folderRules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="目录名称" prop="name">
            <el-input v-model="folderData.name" auto-complete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级目录" prop="parentId">
            <ac-tree
              v-model="folderData.parentId"
              dataUrl="/system/scriptFolder/queryTree"
              :leafSelect="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="folderVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        :loading="folderLoading"
        @click="submitFolderForm"
      >提交</el-button>
    </template>
  </el-dialog>

  <!--移动目录界面-->
  <el-dialog
    v-model="moveVisible"
    :title="moveTitle"
    width="500px"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-form
      ref="moveForm"
      label-width="120px"
      label-position="right"
      :model="moveData"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="目录">
            <ac-input
              v-model="moveData.name"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="移动到" prop="folderId">
            <ac-tree
              v-model="moveData.folderId"
              dataUrl="/system/scriptFolder/queryTree"
              :leafSelect="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="moveVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        :loading="moveLoading"
        @click="submitMoveForm"
      >提交</el-button>
    </template>
  </el-dialog>

  <!--脚本编辑-->
  <el-dialog
    v-model="dialogVisible"
    width="500px"
    :title="dialogTitle"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-form
      ref="dataForm"
      label-width="120px"
      label-position="right"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="脚本编码" prop="code">
            <el-input
              v-model="formData.id"
              :disabled="true"
              placeholder="系统自动生成"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="脚本名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="目录名称" prop="folderId">
            <ac-tree
              v-model="formData.folderId"
              dataUrl="/system/scriptFolder/queryTree"
              :leafSelect="false"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="dialogVisible=false"
      >取消</el-button>
      <el-button
        type="primary"
        size="default"
        :loading="dialogLoading"
        @click="submitDataForm"
      >提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, watch, onMounted, onBeforeMount } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import api from '@/http/api';
import tool from '@/utils/tool';
import CodeMirrorEditor from "codemirror-editor-vue3";
import "codemirror/mode/css/css.js";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/dracula.css";
import "codemirror/mode/vue/vue.js";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/mode/groovy/groovy.js";
import "codemirror/addon/selection/active-line.js";
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/match-highlighter.js";
import "codemirror/mode/clike/clike.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
import "codemirror/addon/hint/javascript-hint.js";
import "@/assets/style/code.css";
import loading from "@/utils/loading";
import code from "@/admin/components/code/code.js";

const toolData = ref([]);
const hintList = ref([]);
const tree = ref();
const filterText = ref('');
const treeLoading = ref(false);
const treeKey = ref('');
const treeData = ref([]);
const treeExpand = ref([]);
const treeCheck = ref(false);
const treeProps = ref({
  children: 'children',
  label: function(data) {
    return data.text +
      (data.data.code !== undefined && data.data.code != null
        ? ' [' + data.data.code + ']　' : '　')
  }
});
const currNode = ref({
  script: ''
});

const folderTitle = ref('');
const folderVisible = ref(false);
const folderLoading = ref(false);
const folderForm = ref();
const folderData = ref({});
const folderRules = ref({
  name: [{required: true, message: '请输入目录名称', trigger: ['blur', 'change']}],
});

const moveTitle = ref('');
const moveVisible = ref(false);
const moveLoading = ref(false);
const moveForm = ref();
const moveData = ref({});

const dialogVisible = ref(false);
const dialogTitle = ref('');
const dialogLoading = ref();
const dataForm = ref();
const formData = ref({});
const rules = ref({
  name: [
    {required: true, message: '请输入脚本名称', trigger: ['blur', 'change']},
    {max: 100, message: '脚本名称长度最多只能是100个字符', trigger: ['blur', 'change']}
  ],
  folderId: [
    {required: true, message: '请选择目录名称', trigger: ['change', 'blur']},
  ],
});

const codeMirror = ref();
const codeOptions = ref({});
const collapseName = ref('');
const tabName = ref('tool');
const debugLogger = ref('');
const debugResult = ref('');
const isChangeScript = ref(false);

const changeScript = () => {
  isChangeScript.value = true;
};

const changeMode = () => {
  treeCheck.value = !treeCheck.value;
  if (treeCheck.value) {
    tree.value.setCheckedNodes([]);
  }
}

const handleExport = () => {
  const nodes = tree.value.getCheckedNodes(false, true);
  if (!nodes || nodes.length === 0) {
    ElMessage.error("请先选择脚本！");
    return;
  }
  const data = {folderIds: [], scriptIds: []};
  nodes.forEach(node => {
    if (node.type === 'folder') {
      data.folderIds.push(node.id);
    } else if (node.type === 'script') {
      data.scriptIds.push(node.id);
    }
  });
  api.downloadFile('/system/scriptGroovy/exportData', data).then(res => api.saveFileLocal(res));
};

const handleImport = (file) => {
  api.uploadFile('/system/scriptGroovy/importData', {'file': file.file}).then((res) => {
    ElMessage.success(res.message);
    loadTreeData();
  });
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.text.indexOf(value) >= 0
    || (data.data.id != null && data.data.id.indexOf(value) >= 0);
};

const lastTreeNodeId = ref('');
const nodeClick = async(data, treeNode) => {
  if (isChangeScript.value) {
    const result = await ElMessageBox.confirm("代码已有修改，是否放弃修改？", "提示", { type: "warning" }).catch(() => {});
    if (result !== 'confirm') {
      if (lastTreeNodeId.value) {
        tree.value.setCurrentKey(lastTreeNodeId.value);
      }
      treeNode.checked = false;
      return;
    }
  }
  if (currNode.value && (currNode.value.id === data.id || currNode.value.fid === data.id)) {
    treeNode.checked = !treeNode.checked;
  } else {
    treeNode.checked = true;
  }
  if (treeNode.checked) {
    lastTreeNodeId.value = treeNode.data.id;
  }

  if (treeNode.checked) {
    currNode.value = data;
    if (data.type === 'script') {
      loadGroovy(data);

      if (isBuiltin(data)) {
        const message = '此脚本为内置脚本，系统升级时将会被覆盖，如需要修改，请复制一份脚本内容再修改使用！';
        await ElMessageBox.confirm(message, '警告', {type: 'warning'}).catch(() => {});
      }
    } else {
      currNode.value = {fid: data.id, script: ''};
    }
  } else {
    tree.value.setCurrentKey(null);
    currNode.value = {script: ''};
  }

  await nextTick(() => {
    isChangeScript.value = false;
  });
};

const loadGroovy = (data) => {
  currNode.value = {id: data.id || '', script: ''};
  loading.showLoading();
  api.post('/system/scriptGroovy/queryBy', {id: data.id}).then(res => {
    const data = res.data || {};
    if (!data.script) {
      data.script = '';
    }
    currNode.value = data;
    nextTick(() => {
      isChangeScript.value = false;
    });
    loading.hideLoading();
  }).catch(() => loading.hideLoading());
};

const addScriptGroovy = (data) => {
  formData.value = {folderId: data.id};
  dialogTitle.value = "新增脚本";
  dialogVisible.value = true;
};

const editScriptGroovy = (data) => {
  formData.value = data;
  dialogTitle.value = "编辑脚本";
  dialogVisible.value = true;
};

const deleteScriptGroovy = (data) => {
  const url = '/system/scriptGroovy/delete';
  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', {type: 'warning'}).then(() => {
    api.post(url, {id: data.id}).then(res => {
      ElMessage.success(res.message);
      treeExpand.value.push(data.parentId || '0');
      treeExpand.value.push(data.folderId || '0');
      treeKey.value = data.parentId || data.folderId || '0';
      loadTreeData();
    });
  }).catch(() => {});
};

const isBuiltin = (data) => {
  const node = tool.findNode(data.pid, treeData.value);
  return node && node.text === '内置脚本';
};

const addFolder = (data) => {
  showFolderDialog('新增', {parentId: data.id || '', ordinal: 10});
};

const showFolderDialog = (tips, data) => {
  folderTitle.value = tips + '目录';
  folderVisible.value = true;
  folderData.value = Object.assign({}, data);
  folderForm.value && folderForm.value.resetFields();
};

const updateNode = (data) => {
  showFolderDialog('修改', data);
};

const moveNode = (data) => {
  moveTitle.value = '移动目录';
  moveVisible.value = true;
  moveData.value = {id: data.id, name: data.name, folderId: data.parentId};
  moveForm.value && moveForm.value.resetFields();
};

const deleteNode = (data) => {
  const url = '/system/scriptFolder/delete';
  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', {type: 'warning'}).then(() => {
    api.post(url, {id: data.id}).then(res => {
      ElMessage.success(res.message);
      treeExpand.value.push(data.parentId || '0');
      treeExpand.value.push(data.folderId || '0');
      treeKey.value = data.parentId || data.folderId || '0';
      loadTreeData();
    });
  }).catch(() => {});
};

const submitFolderForm = () => {
  folderForm.value && folderForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        folderLoading.value = true;
        api.post('/system/scriptFolder/save', folderData.value).then(res => {
          ElMessage.success(res.message);
          folderVisible.value = false;
          folderLoading.value = false;
          treeExpand.value.push(res.data.id || '0');
          treeKey.value = res.data.id || '0';
          loadTreeData();
        }).catch(() => {
          folderLoading.value = false;
        });
      }).catch(() => {});
    }
  });
};

const submitMoveForm = () => {
  moveForm.value && moveForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        moveLoading.value = true;
        const data = {id: moveData.value.id, parentId: moveData.value.folderId};
        const url = '/system/scriptFolder/updateParentId';
        api.post(url, data).then(res => {
          ElMessage.success(res.message);
          moveVisible.value = false;
          moveLoading.value = false;
          treeExpand.value.push(moveData.value.id || '0');
          treeKey.value = moveData.value.id || '0';
          loadTreeData();
        }).catch(() => {
          moveLoading.value = false;
        })
      }).catch(() => {});
    }
  });
};

const submitDataForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm("请确认是否提交？", "提示", { type: "info" }).then(() => {
        api.post('/system/scriptGroovy/saveSimple', formData.value)
          .then((res) => {
            ElMessage.success(res.message);
            afterSubmit(res.data);
          }).catch(() => {
        });
      }).catch(() => {});
    } else {
      ElMessage.error("数据录入不正确，请重新检查！");
    }
  });
};

const afterSubmit = (data) => {
  treeKey.value = data.id || '';
  dialogVisible.value = false;
  loadGroovy(data);
  loadTreeData();
};

const loadTreeData = () => {
  treeLoading.value = true;
  api.post('/system/scriptGroovy/queryTree').then(res => {
    const node = tree.value.getCurrentNode();
    if (node !== undefined && node != null) {
      treeExpand.value = [node.id, node.data.parentId, node.data.folderId, '0'];
    } else {
      treeExpand.value = ['0'];
    }
    treeData.value = res.data.children;
    treeLoading.value = false;
    if (treeKey.value) {
      nextTick(() => {
        tree.value.setCurrentKey(treeKey.value);
      });
    }
  }).catch(() => {
    treeLoading.value = false;
  });
};

const showHint = () => {
  code.showHint(codeMirror.value.cminstance, hintList.value);
};

const addCode = (code) => {
  if (code && codeMirror.value) {
    codeMirror.value.cminstance.replaceSelection(code);
    codeMirror.value.cminstance.focus();
  }
};

const saveCode = () => {
  ElMessageBox.confirm("请确认是否提交？", "提示", { type: "info" }).then(() => {
    api.post('/system/scriptGroovy/save', currNode.value).then((res) => {
      ElMessage.success(res.message);
      nextTick(() => {
        isChangeScript.value = false;
      });
    });
  }).catch(() => {});
};

const clean = () => {
  debugLogger.value = '';
  debugResult.value = '';
};

const debug = () => {
  if (!currNode.value.script) {
    ElMessage.error("调试脚本不能为空！");
    return;
  }

  debugLogger.value = '';
  debugResult.value = '';
  tabName.value = tabName.value === 'tool' ? 'logger' : tabName.value;

  api.post('/system/scriptGroovy/debugScript', {script: currNode.value.script || ''}).then(res => {
    debugLogger.value = ((res.data && res.data.logger) || '').replace(/\n$/, '');
    debugResult.value = (res.data && res.data.result) || '';
  });
};

const loadToolData = async() => {
  const res = await api.post("/system/scriptTool/queryWithDetailTree");
  toolData.value = res.data && res.data.children || [];
  toolData.value.forEach(item => {
    item.children.forEach(child => {
      if (child.data.code && child.data.code.indexOf('\n') === -1) {
        hintList.value.push(child.data.code);
      }
    });
  });
};

watch(() => filterText.value, val => {
  tree.value.filter(val);
});

onBeforeMount(() => {
  codeOptions.value = code.loadOptions('groovy');
});

onMounted(async() => {
  hintList.value.push(...await code.loadModelHint());
  hintList.value.push(...await code.loadGroovyHint());
  hintList.value.push(...await code.loadDictionaryHint());
  loadTreeData();
  await loadToolData();
  await nextTick(() => codeMirror.value.refresh());
});
</script>

<style scoped lang="scss">
.mirror {
  line-height: 25px;
  :deep(.cm-match-highlight) {
    background-color: #ffff0066;
  }
}
.mirror pre, .mirror div, .mirror span,
.mirror :deep(.CodeMirror pre.CodeMirror-line),
.mirror :deep(.CodeMirror pre.CodeMirror-line-like) {
  font-family: "Courier New", "Helvetica Neue", Helvetica, "PingFang SC",
  "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif!important;
}
.title {
  display: flex;
  flex-direction: row;
  margin-right: 10px;
  height: 40px;
  align-items: center;

  .title-content {
    flex-grow: 1;
    font-size: 18px;
  }
  .title-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .title-button .button-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    .button-item {
      margin: 0 5px 0 5px;
    }
  }
  .title-button .title-button-box {
    height: 30px;
    width: 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }

  .title-button .title-button-box:hover {
    background: #eaeaea;
    border: none;
  }

  .title-button .title-button-box:focus-visible {
    outline: unset;
  }
}

.filter-box {
  margin-right: 10px;
}

.tree :deep(.el-tree-node__content) {
  height: 40px;
}

.page-aside-grow {
  width: 100% !important;

  :deep(.el-tree) {
    display: flex;
    flex-direction: column;
    width: 1px !important;
  }

  :deep(.el-tree-node) {
    display: flex;
    flex-direction: column;
    width: 100% !important;
  }

  :deep(.el-tree-node__content) {
    display: flex;
    flex-grow: 1;
  }
}

.node-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;

  .icon {
    display: flex;
    align-items: center;
  }

  .node-label {
    margin-left: 6px;
    flex-grow: 1;
    width: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;

    > span {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .node-button {
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .node-button .node-button-item {
    height: 30px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .node-button .node-button-item:focus-visible {
    outline: unset;
  }
}
:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content) {
  background-color: unset!important;
}
:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
  background-color: #f5f7fa!important;
}
:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
  background-color: #ecf5ff!important;
}
.node-item:hover {
  .node-button .node-button-item:hover {
    background: #eaeaea;
  }
}
.page-main {
  padding: 0!important;
}

.box {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  .left {
    width: 1px;
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .mirror {
      height: 1px;
      flex-grow: 1;
      overflow: hidden;
    }
  }
  .right {
    width: 300px;
    padding: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    :deep(.el-tabs) {
      padding: 0;
      .el-tabs__header {
        margin-bottom: 2px !important;
      }
    }
    .tool {
      height: 1px;
      overflow: auto;
      flex-grow: 1;
      :deep(.el-collapse-item__header) {
        font-size: 14px;
      }
      .function-item {
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        .tooltip {
          width: 1px;
          flex-grow: 1;
          flex-wrap: nowrap;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          color: #0055ff;
          margin-right: 10px;
        }
        .example {
          width: 50px;
          color: coral;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    :deep(.el-textarea) {
      height: 100%;
    }
    :deep(.el-textarea__inner) {
      height: 100%;
      background: #282a36;
      color: #f1fa8c!important;
      box-shadow: none;
      resize: none;
      padding: 5px 0 5px 10px;
      overflow-y: auto;
      font-family: "Courier New", "Helvetica Neue", Helvetica, "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif!important;
    }
    .button {
      padding: 5px 0 0 10px;
      text-align: right;
    }
  }
}
.content-box {
  .title {
    margin-bottom: 10px;
    font-size: 16px!important;
  }
  .content {
    font-size: 15px!important;
  }
}
</style>